<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>活动传播效果</title>
</head>
<link href="<%=path %>/hplus/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=path %>/hplus/css/animate.min.css" rel="stylesheet">
<link href="<%=path %>/hplus/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<style>
  .col-sm-1{
        padding-right: 0;
    }
  body{
		font-size:12px;
		font-family:"宋体";
	}
  .label1{
  		font-size:15px;
  		margin-left:10px;
  		margin-top:15px;
  }
  .label2{
  		font-size:12px;
  		margin:10px;
  		margin-top:5px;
  }
  .row{
  		background-color:#fff;
  		margin:10px;  		
  }
  .click-count{
  		font-size:16px;
  		color:#1ab394;
  }
  .point{
  		width:100%;
  		margin-top:-20px;
  		height:300px;
  }
</style>
<body class="gray-bg">
	<div class="from-group">
		<div class="row" style="background-color:#f3f3f4;">
			<div class="form-group">
				<label class="col-sm-5 control-label"><a href="<%=path %>/view/ui/aemInfoPage">全员营销活动</a>><a href="#" class="activity">XXX活动</a>><label class="activity"></label>传播效果</label>
			</div>
		</div>
	</div>
	<div class="from-group">
		<div class="row">
				<label class="col-sm-11 control-label label1"><label class="activity">XXX活动</label>传播效果</label>
				<label class="col-sm-3 control-label label2">总点击人数（UV）：<span class="click-count all-click-count">30236</span></label>
				<label class="col-sm-3 control-label label2">分享后带来的点击数：<span class="click-count after-click-count" >30236</span></label>
		</div>
	</div>
	<div class="from-group">
	   <div class="wrapper wrapper-content">
			     <div class="tabs-container">
				    <ul class="nav nav-tabs">
				    <shiro:hasPermission name="spread:node">
		                <li class="active"><a data-toggle="tab" data-tab="tab1" href="#tab-1"  aria-expanded="true">所有传播节点</a>
		                </li>
		            </shiro:hasPermission>
		            <shiro:hasPermission name="spread:node_spread">
		                <li><a data-toggle="tab" href="#tab-2"  data-tab="tab2" aria-expanded="false" >有子节点的传播节点</a>
		                </li>
		            </shiro:hasPermission>
				   	</ul>
				</div>
		 <div class="tab-content">
		     <div class="ibox-content tab-pane active" id="tab-1">
		     	<div class="row">
		     		<label class="col-sm-11">当前展示节点数：<span class="show-point">500</span></label>
		     		<button class="col-sm-1 btn btn-primary text-center full" type="button"  style="height:32px;"><label style="margin-left:-10px;">全屏查看</label></button>
		     	</div>
		     	<div class="point" id="allPoint"></div>
		     </div>
		     <div class="ibox-content tab-pane" id="tab-2">
			     <div class="row">
			     		<label class="col-sm-11">当前展示节点数：<span class="show-point">400</span></label>
			     		<button class="col-sm-1 btn btn-primary text-center full" type="button" style="height:32px;"><label style="margin-left:-10px;">全屏查看</label></button>
			     </div>
		     	<div class="point" id="childPoint"></div>
		     </div>
	     </div>
	</div>
	</div>
	<div class="from-group">
		<div class="wrapper wrapper-content">
		     <div class="tabs-container">
			    <ul class="nav nav-tabs">
	                <li class="active"><a data-toggle="tab" href="#tab-3" aria-expanded="true" >传播TOP10</a>
	            	</li>
	            	<!-- <div class="col-sm-9"></div> -->
	            	 <shiro:hasPermission name="spread:export_data">
	            	<button class="col-sm-1 btn btn-primary text-center" type="button" id="export" style="min-width:120px;height:32px;float:right;"><label style="margin-left:-5px;">导出更多数据</label></button>
	            	</shiro:hasPermission>
			   	</ul>
			</div>
			<div class="tab-content">
			     <div class="ibox-content tab-pane active" id="tab-3">
			     	<table class="table table-bordered table-striped table-hover" style="font-size:12px;">
			     </div>
		     </div>
		</div>
	</div>
					
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.1/echarts.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.1/metisMenu.js"></script>
<script type="text/javascript" src="<%=path%>/js/system/menuJump.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
var aemId = getQueryString("aemId");
//aemId=1;
var aemName = decodeURI(getQueryString("aemName"));
//aemName="全员营销-马杰";
//导出类型 0导出所有节点 1导出有子节点的
var exportType=0;
$(function(){
	//获取活动名称
	$(".activity").html(aemName);
	$(".activity").click(function(){
		window.location.href = path+"/view/ui/aemInfoEditPage?id="+aemId;
	})
	initChart();		
})
$("a[data-toggle='tab']").click(function(){
	if($(this).data("tab")=="tab1"){
		exportType=0;
	}else if($(this).data("tab")=="tab2"){
		exportType=1;
	}
	initChart();
})
function initChart(){
	//表格数据
	var tableData;
	//图表数据
	var webkitDep=null;
	//点击数
	var clickCount=null;
	//分享后点击数
	var afterClickCount=null;
	//节点数
	var showPointCount=null;
	//节点
	var nodesData = new Array();
	//节点之间连线
	var linksData = new Array();
	//统计数据
	var countUrl = path+"/dissemination/pointCount";
	$.ajax({
			type:"post",
			url:countUrl,
			async: false,
			data:{
				"aemId":aemId,
				"exportType":exportType
			},
        success:function(data){
        	clickCount=data.data.clickCount;
        	afterClickCount=data.data.afterClickCount;
        	tableData=data.data.tableData;
        }
    }); 
	//获取节点的统计数据
	var initPointUrl =path+"/dissemination/findPointChart";
	var pointList = null;
	$.ajax({
		type:"post",
		url:initPointUrl,
		async: false,
		data:{
			"aemId":aemId,
			"exportType":exportType
		},
	    success:function(data){
	    	pointList=data.data;
	    }
	});
	//处理
	if(pointList!=null){
		nodesData = new Array();
		var names = new Array();
		for(var i=0;i<pointList.length;i++){
			var nodes = new Object();
			var links = new Object();
			var point = pointList[i];
			var openId = point.openId+"";
			if(i==0){
				nodes.category=point.userIdentity;
				nodes.value=point;
				nodes.name=openId;
				nodesData.push(nodes);
				names.push(openId);	
			}else if(names.indexOf(openId)<0){			
				nodes.category=point.userIdentity;
				nodes.value=point;
				nodes.name=openId;
				nodesData.push(nodes);
				names.push(openId);	
			}
			links.source=pointList[i].openId;
			links.target=pointList[i].parentOpenId;			
			linksData[i]=links;
		}
	} 
	//初始化统计数
	$(".all-click-count").html(clickCount);
	$(".after-click-count").html(afterClickCount);
	$(".show-point").html(nodesData.length);
	webkitDep = {  
		    "type": "force",  
		    "categories": [//关系网类别，可以写多组  
			           {  
			               "name": "非关注粉丝",//关系网名称  
			               "keyword": {},
			               "itemStyle": {
			                   "normal": {
			                        "color": "#1D84C6",
			                   }
			               }
			           },
			           {  
			               "name": "粉丝",//关系网名称  
			               "keyword": {},
			               "itemStyle": {
			                   "normal": {
			                        "color": "#F8AC59",
			                   }
			               }
			           },
			           {  
			               "name": "会员",//关系网名称  
			               "keyword": {},  
			               "itemStyle": {
			                   "normal": {
			                        "color": " #ED5565",
			                   }
			               }
			           },
			           {  
		               "name": "员工",//关系网名称  
		               "keyword": {},
		               "itemStyle": {
		                   "normal": {
		                        "color": "#1BB495",
		                   }
		               }
		           }
		    ],  
		    "nodes": nodesData
		    	/*[//展示的节点  
	              {category:0,name:'马杰',value:{"userName":"马杰","participateOrder":"2","time":"2018-01-01","top":"21","count":"441"}},
	              {category:0,name:'银子',value:{"userName":"马杰","participateOrder":"2","time":"2018-01-01","top":"21","count":"441"}},
	              {category:0,name:'王路',value:{"userName":"马杰","participateOrder":"2","time":"2018-01-01","top":"21","count":"441"}},
	              {category:1,name:'张浩',value:{"userName":"马杰","participateOrder":"2","time":"2018-01-01","top":"21","count":"441"}},
	              {category:1,name:'x1',value:{"userName":"马杰","participateOrder":"2","time":"2018-01-01","top":"21","count":"441"}},
	              {category:1,name:'x2',value:{"userName":"马杰","participateOrder":"2","time":"2018-01-01","top":"21","count":"441"}}  
	    		]  */
	    		,  
		    "links":  /*[//节点之间连接  
		              {
		                  "source": '银子',
		                  "target": '马杰'
		              },
		              {
		                  "source": '王路',
		                  "target": '马杰'
		              },
		              {
		                  "source": 'x1',
		                  "target": 'x1'
		              },
		              {
		                  "source": 'x1',
		                  "target": 'x2'
		              },
		              {
		                  "source": 'x1',
		                  "target": '张浩'
		              } 
		    		] */   linksData
			};  
	//初始化图表
	if(exportType==0){
		initAllChart(webkitDep);
	}else{
		//初始化图表
		var temp = new initChildChart(webkitDep);
	    temp.resize();
	}
	//初始化表格
	initTable(tableData);
}
//判断是否在数组中
function isInArray(arr,value){
    if(arr.indexOf&&typeof(arr.indexOf)=='function'){
        var index = arr.indexOf(value);
        if(index >= 0){
            return true;
        }
    }
    return false;
}
//初始化所有传播节点
function initAllChart(webkitDep){
	var allChart = echarts.init(document.getElementById("allPoint"));
	allChart.showLoading();  
	allChart.hideLoading();   
    allOption = {  
        legend: {  
            left:'20',
            top:'20',
            orient:'vertical',
            data: [{name:'非关注粉丝',icon:'circle'},,{name:'粉丝',icon:'circle'},{name:'会员',icon:'circle'},{name:'员工',icon:'circle'}]//此处的数据必须和关系网类别中name相对应  
        },  
        tooltip: {
            trigger: 'item',
            backgroundColor:"#fff",            //标题背景色
            borderColor:"#000", 
            borderWidth:1,                              //边框线宽
            padding:5,                                  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
            textStyle:"color:#000",
            formatter: function (params, ticket, callback) {
              var htmlStr = '<div style="margin:10px;">';
              var param =params.value;
              var userName="游客";
              var order= "暂无";
              var time="暂无";
              var top="暂无";
              var count="0";
              if(StringEmpty(param)){
	              if(StringEmpty(param.nickName)&&param.nickName!="null"){
	            	  userName = param.nickName;
	              }
	              if(StringEmpty(param.participateOrder)){
	            	  order = param.participateOrder;
	              }
	              if(StringEmpty(param.createTime)){
	      			var date = new Date(param.createTime);	      	     
	      	        time = timeFormatLong(date);
	      	      }
	              if(StringEmpty(param.spreadRanking)){
	            	  top = param.spreadRanking;
	              }
	              if(StringEmpty(param.propagationNumber)){
	            	  count = param.propagationNumber;
	              }
	          }
              htmlStr +='用户昵称：' +userName+'</br>';
              htmlStr +='参与顺序：' +order+'</br>';
              htmlStr +='参与时间：' +time+'</br>';
              htmlStr +='传播排名：' +top+'</br>';
              htmlStr +='传播人数：' +count+'</br>';
              htmlStr +='</div>';
              return htmlStr;
             }               
            },
        series: [{  
            type: 'graph',  
            layout: 'force',  
            animation: false,  
            label: {  
                normal: {  
                    show:false,  
                    position: 'right'  
                }  
            },  
            hoverAnimation:true,
            focusNodeAdjacency:true,
            draggable: true,  
            data: webkitDep.nodes,  
            roam : true,
            categories: webkitDep.categories,  
            force: {
                // initLayout: 'circular'
                // repulsion: 20,
                edgeLength: 50,
                repulsion: 20,
                gravity: 0.2
            },
            edges: webkitDep.links  
        }]
    };  
    allChart.setOption(allOption); 
   
}
//初始化有子节点的统计图
function initChildChart(webkitDep){
	var childChart = echarts.init(document.getElementById("childPoint"));
	childChart.showLoading();  
	childChart.hideLoading();   
    childOption = {  
        legend: {  
            left:'20',
            top:'20',
            orient:'vertical',
            data: [{name:'非关注粉丝',icon:'circle'},,{name:'粉丝',icon:'circle'},{name:'会员',icon:'circle'},{name:'员工',icon:'circle'}]//此处的数据必须和关系网类别中name相对应  
        },  
        tooltip: {
            trigger: 'item',
            backgroundColor:"#fff",            //标题背景色
            borderColor:"#000", 
            borderWidth:1,                              //边框线宽
            padding:5,                                  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
            textStyle:"color:#000",
            formatter: function (params, ticket, callback) {
              var htmlStr = '<div style="margin:10px;">';
              var param =params.value;
              var userName="游客";
              var order= "暂无";
              var time="暂无";
              var top="暂无";
              var count="暂无";
              if(StringEmpty(param)){
	              if(StringEmpty(param.nickName)&&param.nickName!="null"){
	            	  userName = param.nickName;
	              }
	              if(StringEmpty(param.participateOrder)){
	            	  order = param.participateOrder;
	              }
	              if(StringEmpty(param.createTime)){
	      			var date = new Date(param.createTime);	      	      	
	      	        time = timeFormatLong(date);
	      	      }
	              if(StringEmpty(param.spreadRanking)){
	            	  top = param.spreadRanking;
	              }
	              if(StringEmpty(param.propagationNumber)){
	            	  count = param.propagationNumber;
	              }
	          }
              htmlStr +='用户昵称：' +userName+'</br>';
              htmlStr +='参与顺序：' +order+'</br>';
              htmlStr +='参与时间：' +time+'</br>';
              htmlStr +='传播排名：' +top+'</br>';
              htmlStr +='传播人数：' +count+'</br>';
              htmlStr +='</div>';
              return htmlStr;
             }               
            },
        series: [{  
            type: 'graph',  
            layout: 'force',  
            animation: false,  
            label: {  
                normal: {  
                    show:false,  
                    position: 'right'  
                }  
            },  
            hoverAnimation:true,
            focusNodeAdjacency:true,
            draggable: true,  
            data: webkitDep.nodes,  
            categories: webkitDep.categories,  
            force: {
                // initLayout: 'circular'
                // repulsion: 20,
                edgeLength: 50,
                repulsion: 20,
                gravity: 0.2
            },
            edges: webkitDep.links  
        }]
    };  
    childChart.setOption(childOption); 
    $(function(){
        window.onresize = function(){
        	childChart.resize();
        }
    })
    this.resize = function size(){
        var childDiv=document.getElementById('childPoint');
        var tabcontent = $(".point")[0];
        width=tabcontent.offsetWidth;
        height=tabcontent.offsetHeight;
        childDiv.style.width=width+'px';
        childDiv.style.height=height+'px';
        childChart.resize(width,height);
    }
}
$("#export").click(function(){
	var countUrl = path+"/dissemination/exportTableData?aemId="+aemId+"&exportType="+exportType;
	window.location.href=countUrl;
});
//初始化列表
function initTable(data){	
	var tableHtml="<tr><th>传播排名</th><th>用户昵称</th><th>OpenID</th><th>用户身份</th><th>传播人数</th> <th>参与时间</th><th>参与顺序</th><th>传播效果</th></tr>";
	for(var i=0;i<data.length;i++){
		var personUrl=path+"/view/ui/disseminationPersonal";
		var tableData=data[i];
		var userName="游客";
		var userIdentity="非关注粉丝";
		var createTime="暂无";
		if(StringEmpty(tableData.nickName)&&tableData.nickName!="null"){
      	  userName = tableData.nickName;
        }
		if(StringEmpty(tableData.createTime)){
			var date = new Date(tableData.createTime);
	        createTime =timeFormatLong(date);
	    }
		if(StringEmpty(tableData.userIdentity)){
			if(tableData.userIdentity=="1"){
				userIdentity="粉丝";
			}else if(tableData.userIdentity=="2"){
				userIdentity="会员";
			}else if(tableData.userIdentity=="3"){
				userIdentity="员工";
			}
		}
		tableHtml+="<tr>";
		tableHtml+="<th>"+tableData.spreadRanking+"</th>";
		tableHtml+="<th id=show-"+tableData.spreadRanking+" data-table="+JSON.stringify(tableData)+" onmouseover ='showDialog("+tableData.spreadRanking+")' ><a  href='javascript:void(0);'>"+userName+"</a></th>";
		tableHtml+="<th>"+tableData.openId+"</th>";
		tableHtml+="<th>"+userIdentity+"</th>";
		tableHtml+="<th>"+tableData.propagationNumber+"</th>";
		tableHtml+="<th>"+createTime+"</th>";
		tableHtml+="<th>"+tableData.participateOrder+"</th>";
		tableHtml+="<th>";
		if(userIdentity=="员工"){
			personUrl+="?aemId="+aemId+"&aemName="+encodeURI(encodeURI(aemName))+"&openId="+tableData.openId+"&userName="+encodeURI(encodeURI(userName));
			 <shiro:hasPermission name="spread:personal_spread">
			tableHtml+="<a onclick=\"menuPublic('个人传播图','"+personUrl+"','100000284');\">查看</a>";
			</shiro:hasPermission>
		}
		tableHtml+="</th>";
		tableHtml+="</tr>";
	}
	$(".table-bordered").html(tableHtml);
}
//显示悬浮框
function showDialog(data){
	var info=$("#show-"+data).data("table");
	var userInfo=info.userInfo;
	var contentHtml="";
	if(!StringEmpty(userInfo)){
		return null;
	}
	if(info.userIdentity==1||info.userIdentity==0){
		return null;
	}
	var name=userInfo.name;
	var phone=userInfo.phone;
	contentHtml+="<p>姓名："+name+"</p><p>手机号："+phone+"</p>";
	if(info.userIdentity==3){
		var departmentNames = userInfo.departmentNames;
		contentHtml+="<p>所属部门:";
		if(StringEmpty(departmentNames)){		
			var names = departmentNames.split("、");
			for(var i=0;i<names.length;i++){
				if(i==0){
					contentHtml+=names[i]+"</p>";
				}else{
					contentHtml+="<p style='text-indent:4em;'>"+names[i]+"</p>";
				}
			}
		}else{
			contentHtml+="暂无</p>";
		}
	}
	var d = dialog({
			width: 200,
	        align: 'right',
			content:contentHtml,
			quickClose: true// 点击空白处快速关闭
	}); 
	d.show($("#show-"+data)[0]);
}
//全屏查看图标
$(".full").click(function(){
	window.open(path+"/view/ui/fullScreenDissemination?aemId="+aemId+"&exportType="+exportType);
})
//判断字符串是否为空
function StringEmpty(content) {
    if (content == undefined || content == "" || content == null) {
        return false;
    } else {
        return true;
    }
}
function getUrlParam(key){
	var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
}
//时间格式化为yyyy-mm-dd
function timeFormat(date){
	var y = date.getFullYear();    
	var mon = date.getMonth()+1;//获取当前月份的日期   
	var d = date.getDate(); 
	return  timeMakeLong(y)+"-"+timeMakeLong(mon)+"-"+timeMakeLong(d);
}
//时间格式化为yyyy-mm-dd hh:mm:ss
function timeFormatLong(date){
	var y = date.getFullYear();    
	var mon = date.getMonth()+1;//获取当前月份的日期   
	var d = date.getDate(); 	
	var h=date.getHours();//小时 
   var m=date.getMinutes(); //分 
   var s=date.getSeconds(); //秒
   return  timeMakeLong(y)+"-"+timeMakeLong(mon)+"-"+timeMakeLong(d)+" "+timeMakeLong(h)+":"+timeMakeLong(m)+":"+timeMakeLong(s);
}
//时间补0
function timeMakeLong(data){
	if((data+"").length==1){
		return "0"+data;
	}
	return data;
}
</script>
</html>